var userArr;
var otherRes;
jQuery(function($) {
	var grid_selector = "#grid-table";
	var pager_selector = "#grid-pager";
	//在动态加载css文件之前，先把前一个页面动态加载的css文件删除，动态加载的css文件的class='pageSpecCss'
	$("head link").remove(".pageSpecCss");

	// 由于子页面的css文件需要添加到主页面的固定地方，所以只能用js代码动态添加
	//$("#cssLink").after("<link rel='stylesheet' class='pageSpecCss' href='../assets/css/ui.jqgrid.css'></link>");

	// resize to fit page size
	$(window).on('resize.jqGrid', function() {
		$(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
	});
	// resize on sidebar collapse/expand
	var parent_column = $(grid_selector).closest('[class*="col-"]');
	$(document).on(
			'settings.ace.jqGrid',
			function(ev, event_name, collapsed) {
				if (event_name === 'sidebar_collapsed'
						|| event_name === 'main_container_fixed') {
					$(grid_selector).jqGrid('setGridWidth',
							parent_column.width());
				}
			});
			

	// 加载页面的用户清单
	$.ajax({
		type : "get",
		url : "../user/datagrid.do",
		dataType : "json",
		success : function(data) {
			if (data.status == "SUCCESS") {
				var sexStr = "0:男;1:女";
				var userStatusStr = "0:启用;1:冻结";
				//处理jqGrid
				userArr = data.resBody;
				$(grid_selector).jqGrid({
					data : userArr,
					datatype : "local", // 为local时初始化不加载，支持json，xml等
					colNames : [ ' ', 'ID', '账号', '姓名','性别','联系方式',"创建时间",'状态','删除标记' ], // 表头
					colModel : [ // 这里会根据index去解析jsonReader中root对象的属性，填充cell
					{
						name : 'myac',
						index : '',
						width : 80,
						fixed : true,
						sortable : false,
						resize : false,
						formatter : "actions",
						formatoptions : {
							keys : false,
							//editformbutton : editAuth,//只有当这里为true的时候，editOptions才会起作用
							editbutton : true,
							//editOptions : {
							//	recreateForm : true,
								//closeAfterEdit: true,
								//beforeShowForm : beforeEditCallback,
							//	afterSubmit : afterEditCallBack
							//},
							onSuccess: afterEditCallBack,
								
							//delformbutton : editAuth,
							delbutton : false
//							delOptions : {
//								recreateForm : true,
//								beforeShowForm : beforeDeleteCallback,
//								afterSubmit : afterDeleteRowCallBack
//							}
						}
					}, {
						name : 'id',
						index : 'id',
						key : true,
						width : 50,
						align : "center",
						sortable : true,
						frozen : true,
						editable : true,
						editoptions: {readonly: "readonly"},
						formatter : ""
					}, {
						name : 'account',
						index : 'account',
						width : 100,
						align : "center",
						editable : true,
						editrules : {required:true},
						editoptions: { maxlength: 32},
						editoptions: {readonly: "readonly"},
						formoptions:{elmsuffix:'*'},
						sortable : false
					}, {
						name : 'username',
						index : 'username',
						width : 100,
						align : "center",
						editable : true,
						editoptions: { maxlength: 32},
						editrules : {required:true},
						formoptions:{elmsuffix:'*'},
						sortable : false
					}, {
						name : 'sex',
						index : 'sex',
						width : 100,
						align : "center",
						formatter:'select',
						editable : true,
						edittype : "select",
						editoptions:{value:sexStr},
						sortable : false
					}, {
						name : 'telNo',
						index : 'tenlNo',
						width : 150,
						align : "center",
						editable : true,
						sortable : false
					}, {
						name : 'createTime',
						index : 'createTime',
						width : 150,
						align : "center",
						formatter:'date',
						formatoptions: {srcformat:"ISO8601Long", newformat: 'Y-m-d H:i:s'}, 
						editable : false,
						edittype : "date",
						sortable : false
					}, {
						name : 'status',
						index : 'status',
						width : 80,
						align : "center",
						formatter:'select',
						editable : true,
						edittype : "select",
						editoptions:{value:userStatusStr},
						sortable : false
					}, {
						name : 'delFlag',
						index : 'delFlag',
						width : 80,
						align : "center",
						editable : true,
						formatter:'checkbox',
						formatoptions: {disabled : true} ,
						edittype : "checkbox",
						editoptions:{value:"X:"},
						sortable : false
					} ],
					width : 'auto', // 数字 & 'auto','100%'
					height : 'auto',
					rowNum : 100, // 每页记录数
					rowList : [], // 每页记录数可选列表
					pager : pager_selector, // 分页标签divID
					viewrecords : false, // 显示记录数信息，如果这里设置为false,下面的不会显示
					// recordtext: "第{0}到{1}条, 共{2}条记录",
					//默认显示为{0}-{1} 共{2}条 scroll: false,
					//滚动翻页，设置为true时翻页栏将不显示
					sortable : false,//这里是排序的默认设置，这些值会根据列表header点击排序时覆盖
					sortname : "id",
					sortorder : "asc",
					altRows : true,
//					prmNames : {  
//					    page:"page",    // 表示请求页码的参数名称  
//					    rows:"rows",    // 表示请求行数的参数名称  
//					    sort: "sidx", // 表示用于排序的列名的参数名称  
//					    order: "sord", // 表示采用的排序方式的参数名称  
//					    search:"_search", // 表示是否是搜索请求的参数名称  
//					    nd:"nd", // 表示已经发送请求的次数的参数名称  
//					    id:"id", // 表示当在编辑数据模块中发送数据时，使用的id的名称  
//					    oper:"oper",    // operation参数名称（我暂时还没用到）  
//					    editoper:"edit", // 当在edit模式中提交数据时，操作的名称  
//					    addoper:"add", // 当在add模式中提交数据时，操作的名称  
//					    deloper:"del", // 当在delete模式中提交数据时，操作的名称  
//					    subgridid:"id", // 当点击以载入数据到子表时，传递的数据名称  
//					    npage: null,   
//					    totalrows:"totalrows" // 表示需从Server得到总共多少行数据的参数名称，参见jqGrid选项中的rowTotal  
//					}
					prmNames : {oper:"oper",editoper:"edit", addoper:"add", deloper:"del"},

					caption : "用户列表", // 显示查询结果表格标题
					//rownumbers : true, // 设置列表显示序号,需要注意在colModel中不能使用rn作为index
					//rownumWidth : 30, // 设置显示序号的宽度，默认为25
					multiselect : true, // 多选框
					multiboxonly : true,// 在点击表格row时只支持单选，只有当点击checkbox时才多选，需要multiselect=true是有效
					
					//toolbar : [true,"both"],
					scroll : true,//创建一个动态滚动的表格，当为true时，翻页栏被禁用
					pgbuttons : false,//是否显示翻页按钮
					pginput : false,//是否显示跳转页面的输入框
					emptyrecords : "无用户信息",//当返回的数据行数为0时显示的信息,。只有当属性 viewrecords 设置为ture时起作用
					loadtext : "数据查询中...",//当请求或者排序时所显示的文字内容
						
					editurl: "../user/editUser.do"//点击编辑的保存按钮时
				});
				$(window).triggerHandler('resize.jqGrid');// trigger window
				// resize to make
				// the grid get the
				// correct size

				// 这里设定分页bar显示的信息
				$(grid_selector).jqGrid('navGrid', pager_selector, {
					cloneToTop: true,
					edit : true,
					editicon : 'ace-icon fa fa-pencil blue',
					add : true,
					addicon : 'ace-icon fa fa-plus-circle purple',
					del : true,
					delicon : 'ace-icon fa fa-trash-o red',
					delfunc : deleteRowsData,
					search : true,
					searchicon : 'ace-icon fa fa-search orange',
					view : true,
					viewicon : 'ace-icon fa fa-search-plus grey',
					refresh : false
				}, {
					recreateForm: true,
					checkOnSubmit: false, 
					closeAfterEdit: true,
					beforeShowForm : beforeEditCallback,
					afterSubmit : afterEditCallBack
				}, {
					recreateForm: true,
					checkOnSubmit: false, 
					closeAfterAdd: true,
					beforeShowForm : beforeEditCallback,
					afterSubmit : afterAddCallBack
				}, {
//					recreateForm: true,
//					checkOnSubmit: false, 
//					beforeShowForm : beforeDeleteCallback,
//					afterSubmit : afterDeleteRowsCallBack
				},{
					closeAfterSearch: true
				},{},{}
				);
				
				//自定义按钮
				$(grid_selector).navSeparatorAdd(pager_selector,{sepclass : "ui-separator",sepcontent: ''}).navButtonAdd(pager_selector,{
					//id : "batchIn",
					caption : "",
					title : "修改公司权限",
					position : "last",//添加新按钮的位置，first或last；默认为last
					buttonicon : "fa-pencil-square-o",
					onClickButton : function(){alert(111);}
				});
			}
		}
	});
	
	function beforeDeleteCallback(e) {
		var form = $(e[0]);
		if(form.data('styled')) return false;
		
		form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
		style_delete_form(form);
		
		form.data('styled', true);
	}
	
	function style_delete_form(form) {
		var buttons = form.next().find('.EditButton .fm-button');
		buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
		buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
		buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>');
	}
	
	function afterEditCallBack(response,postdata){
		var json = eval('(' + response.responseText + ')');
		if(json.status == "SUCCESS"){
			selRowId = $(grid_selector).jqGrid('getGridParam','selrow');
			$(grid_selector).jqGrid('setRowData',selRowId,json.resBody);
			updateUserArrAfterEditRow(json.resBody);
			
			popTipInfo('编辑成功');//弹出提示，提示操作是否成功
			return [true,json.message,selRowId];
		}else{
			popTipInfo('编辑失败');
			return [false,json.message];
		}
	}
	
	//当编辑jqgrid的行数据时，同时更新userArr的行信息
	function updateUserArrAfterEditRow(userObj){
		for ( var i = 0; i < userArr.length; i++) {
			if (userArr[i].id == userObj.id) {
				userArr.splice(i,i,userObj);
				break;
			}
		}
	}
	
	function afterAddCallBack(response,postdata){
		var json = eval('(' + response.responseText + ')');
		if(json.status == "SUCCESS"){
			rowId = json.resBody.id;
			$(grid_selector).jqGrid('addRowData',rowId,json.resBody,"last");
			userArr.push(json.resBody);//jqGrid在新增行数据的时候，同时往js变量userArr中新增该数据
			
			popTipInfo('添加成功');
			return [true,json.message,rowId];
		}else{
			popTipInfo('添加失败');
			return [false,json.message];
		}
	}
	
	//只选中一行的时候做删除
	function afterDeleteRowCallBack(response,postdata){
		var json = eval('(' + response.responseText + ')');
		if(json.status == "SUCCESS"){
			selRowId = $(grid_selector).jqGrid('getGridParam','selrow');
			$(grid_selector).jqGrid('delRowData',selRowId);
			updateUserArrAfterDeleteRow(selRowId);
			
			popTipInfo('删除成功');
			return [true,json.message,selRowId];
		}else{
			popTipInfo('删除失败');
			return [false,json.message];
		}
	}
	
	//选中多行的时候做删除
	function afterDeleteRowsCallBack(response,postdata){
		var json = eval('(' + response.responseText + ')');
		if(json.status == "SUCCESS"){
			selRowIds = $(grid_selector).jqGrid('getGridParam','selarrrow');
			for ( var i = 0, j = selRowIds.length; i < j; i++) {   
			    $(grid_selector).jqGrid('delRowData', selRowIds[0]);
			    updateUserArrAfterDeleteRow(selRowIds[0]);
			} 
			popTipInfo('删除成功');
			return [true,json.message,selRowIds];
		}else{
			popTipInfo('删除失败');
			return [false,json.message];
		}
	}
	
	//jqGrid在删除行数据的时候，同时从js变量userArr中删除该数据
	function updateUserArrAfterDeleteRow(userId){
		for ( var idx = 0; idx < userArr.length; idx++) {
			if (userArr[idx].id == userId) {
				userArr.splice(idx,1);
				break;
			}
		}
	}
	
	function beforeEditCallback(e) {
		var form = $(e[0]);
		//form.find('#account').attr('readOnly',rowId=='new'?false:true)
		form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
		style_edit_form(form);
		
		selId = form.find('#id').val();
		form.find('#account').attr('readOnly',selId==''?false:true);
	}

	function style_edit_form(form) {
		//update buttons classes
		var buttons = form.next().find('.EditButton .fm-button');
		buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
		buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
		buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>');
		
		buttons = form.next().find('.navButton a');
		buttons.find('.ui-icon').hide();
		buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
		buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');		
	}
	
	//由于在删除多个行数据的时候，使用默认方法会导致ID传入到spring报错，只能对多行删除重新定义
	function deleteRowsData(ids){
		//弹出的dialog的title字段允许HTML代码
		$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
			_title: function(title) {
				var $title = this.options.title || '&nbsp;';
				if( ("title_html" in this.options) && this.options.title_html == true )
					title.html($title);
				else title.text($title);
			}
		}));
		
		//弹出提示框
		$( "#confirmDelete" ).removeClass('hide').dialog({
			resizable: false,
			modal: true,
			title: '<div class="widget-header"><h4 class="smaller"><i class="ace-icon fa fa-exclamation-triangle red"></i></h4></div>',
			title_html: true,
			buttons: [
				{
					html: "<i class='ace-icon fa fa-trash-o bigger-110'></i>&nbsp; 确定",
					"class" : "btn btn-danger btn-xs",
					click: function() {
						$( this ).dialog( "close" );
						$.ajax({
							type : "POST",
							data : "ids="+ids,
							dataType : "json",
							url: "../user/delUsersByIds.do",
							success : function(data) {
								if (data.status == "SUCCESS") {
									var userTemp;
									selRowIds = $(grid_selector).jqGrid('getGridParam','selarrrow');
									//for ( var i = 0, j = selRowIds.length; i < j; i++) {//如果是在界面上删除显示的数据
									for ( var i = 0; i < selRowIds.length; i++) {//如果只是更新界面的删除标记
										//如果在界面上不显示删除标记，则使用下面的语句来控制界面数据的删除
									    //$(grid_selector).jqGrid('delRowData', selRowIds[0]);
									    //updateUserArrAfterDeleteRow(selRowIds[0]);
										
										//如果在界面上显示删除标记，则使用下面的语句来刷新界面的数据即可
										for ( var j = 0; j < userArr.length; j++) {
											userTemp = userArr[j];
											if (userTemp.id == selRowIds[i]) {
												userTemp.delFlag = 'X';
												$(grid_selector).jqGrid('setRowData',selRowIds[i],userTemp);
												userArr[j] = userTemp;
												break;
											}
										}
									} 
									popTipInfo('删除成功');
								}else{
									popTipInfo('删除失败');
								}
							}
						});
					}
				}
				,
				{
					html: "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; 取消",
					"class" : "btn btn-xs",
					click: function() {
						$( this ).dialog( "close" );
					}
				}
			]
		});
	}
});
